/*
 * @Descripttion: 自定义指令： 复制  v-copy
 * @Author: 66
 * @Date: 2020-12-15 08:56:25
 * @LastEditors: 66
 * @LastEditTime: 2020-12-15 14:19:01
 * @1.动态创建一个textarea
 * @2.给textarea赋值value，并插入到body中
 * @3.选中textarea的值并复制
 * @4.将textarea移除
 */
import { Toast } from "vant"
const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = ()=> {
      if(!el.$value) {
        // 值为空的时候，给出提示。
        Toast('无复制内容')
        return
      }
      // 动态创建textarea标签
      const textarea = document.createElement('textarea')
      // 将textarea设为readnonly防止ios下自动唤起键盘，同时将textarea移除可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要copy的值赋给textarea标签的value属性
      textarea.value = el.$value
      // 将textarea插入到body中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if(result) {
        Toast('复制成功') // 复制成功提示
      }
      document.body.removeChild(textarea)
    }
    // 绑定点击事件
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新时触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑是，移除绑定事件
  unbind(el) {
    el.removeEventListener('click', el.handler)
  }
}

export default copy